import { ref } from 'vue'
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute, onBeforeRouteUpdate, useRouter } from 'vue-router'
import { useCookies } from '@vueuse/integrations/useCookies'
import { toast } from '@/composables/util'

export const useTabList = () => {
  // 获取当前路由对象
  const route = useRoute()
  // 获取路由实例对象
  const router = useRouter()
  // 使用Vue Cookies插件的useCookies方法获取cookie对象
  const cookie = useCookies()
  // 使用 pinia 的 useUserStore 方法获取用户状态管理对象
  const userStore = useUserStore()
  // 将 userStore 中的属性转换成响应式的引用，并解构赋值给常量
  const { asidWidth, zIndex } = storeToRefs(userStore)

  // 当前路由地址
  const activeTab = ref(route.path)
  // 路由表
  const tabList = ref([
    {
      title: '后台首页',
      path: '/'
    }
  ])

  // 添加标签
  const addTab = tab => {
    // 判断是否已存在该标签页
    let noTab = tabList.value.findIndex(t => t.path == tab.path) == -1
    // 如果不存在，则添加该标签页
    if (noTab) tabList.value.push(tab)
    // 更新标签页列表的cookie
    updateTabListCookie(tabList.value)
  }

  // 监听路由参数
  onBeforeRouteUpdate(to => {
    // 将要去的路径赋值给当前激活的标签页
    activeTab.value = to.path
    // 调用添加标签
    addTab({
      title: to.meta.title,
      path: to.path
    })
  })

  // 删除标签
  const removeTab = e => {
    // 获取当前的标签页列表
    const { value: tabs } = tabList
    // 获取当前激活的标签页
    let { value: activeVal } = activeTab
    // 查找要移除的标签页的索引
    const index = tabs.findIndex(tab => tab.path === e)
    // 如果找到了要移除的标签页
    if (index >= 0) {
      // 获取下一个标签页，如果没有下一个标签页，则获取前一个标签页
      const nextTab = tabs[index + 1] || tabs[index - 1]
      // 如果有下一个标签页，则将它设为激活的标签页
      if (nextTab) activeVal = nextTab.path
    }
    // 更新激活的标签页和标签页列表
    activeTab.value = activeVal
    // 从标签页列表中移除要移除的标签页
    tabList.value = tabs.filter(tab => tab.path !== e)
    // 更新标签页列表的 cookie
    updateTabListCookie(tabList.value)
  }

  // 更新标签页列表的 cookie
  const updateTabListCookie = tabs => cookie.set('tabList', tabs)

  // 标签变更
  const changeTab = e => {
    // 将事件触发获取路由路径赋值给当前激活的标签
    activeTab.value = e
    // 将路径赋值给全局路由对象
    router.push(e)
  }

  // 初始化标签列表
  const initTabList = () => {
    // 从 cookie 中获取标签列表
    let tabs = cookie.get('tabList')
    // 如果有才赋值
    if (tabs) tabList.value = tabs
  }
  // 调用初始化标签列表
  initTabList()

  // 标签快捷操作
  const handleClose = params => {
    let toastMessage = ''
    switch (params) {
      case 'closeAll':
        // 赋值当前激活的标签页
        activeTab.value = '/'
        // 重新赋值标签页列表
        tabList.value = [{ title: '后台首页', path: '/' }]
        // if (tabList.value.length === 1) toast('当前无可关闭的标签', 'error')
        toastMessage = tabList.value.length === 1 ? '当前无可关闭的标签' : ''
        break
      case 'closeOther':
        tabList.value = tabList.value.filter(tab => tab.path == '/' || tab.path == activeTab.value)
        // tabList.value = [tabList.value[0], tabList.value.find(tab => tab.path === activeTab.value)]
        // if (tabList.value.length === 1) toast('当前无可关闭的标签', 'error')
        break
      case 'left':
        const currentIndexLeft = tabList.value.findIndex(tab => tab.path === activeTab.value)
        if (currentIndexLeft > 0 && tabList.value.length > 2) {
          tabList.value = [tabList.value[0], ...tabList.value.slice(currentIndexLeft)]
        } else if (tabList.value.length <= 2 && currentIndexLeft <= 1) {
          // toast('当前无可关闭的标签', 'error')
          toastMessage = '当前无可关闭的标签'
        }
        break
      case 'right':
        const currentIndexRight = tabList.value.findIndex(tab => tab.path === activeTab.value)
        if (currentIndexRight >= 0 && currentIndexRight < tabList.value.length - 1) {
          tabList.value = [tabList.value[0], ...tabList.value.slice(1, currentIndexRight + 1)]
        } else if (tabList.value.length - 1 === currentIndexRight) {
          // toast('当前无可关闭的标签', 'error')
          toastMessage = '当前无可关闭的标签'
        }
        break
      default:
        break
    }
    if (toastMessage) toast(toastMessage, 'error')
    // 调用更新标签页列表的 cookie
    updateTabListCookie(tabList.value)
  }

  return {
    zIndex,
    tabList,
    activeTab,
    asidWidth,
    changeTab,
    removeTab,
    handleClose
  }
}

[
  { title: '后台首页', path: '/' },
  { title: '商品管理', path: '/goods/list' },
  { title: '分类列表', path: '/category/list' },
  { title: '规格管理', path: '/skus/list' },
  { title: '优惠券管理', path: '/coupon/list' }
]